<template>
    <div class="love">
        <button @click="getLove">获取一句土味情话</button>
        <ul>
            <li v-for="item in loveStore.loveList" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {useLoveStore} from '@/store/Love'
const loveStore = useLoveStore()
// 监视 pinia中的数据变化 mutate store本身的信息,state store中的数据
loveStore.$subscribe((mutate,state) => { 
    localStorage.setItem('love',JSON.stringify(state.loveList))
 })

function getLove(){
    loveStore.insertLove()
}

</script>

<style scoped>
.love{
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>